<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素</title>
</head>
<body>
    <!--
        案例：有一个下拉框， 再来一个 文本框、按钮
          要求：点击按钮，如果文本框内容不为空，则在下拉框中添加一个选项

    -->
<select id="sel">
    <option>-----请选择------</option>
    <option>中国</option>
    <option>小日本</option>
</select>

<br>
<input type="text" id="text" placeholder="请输入国籍">
<input type="button" id="btn" value="添加国籍">
<br>
<input type="text" id="text2" placeholder="请输入国籍">
<input type="button" id="btn2" value="删除国籍">
</body>
<script>


    document.getElementById("btn2").addEventListener("click", function() {
        //1.获取文本框内容
        let text = document.getElementById("text2").value;
        //2.获取所有的option选项， 循环找出与文本框内容一致的option
        let options  = document.getElementsByTagName("option");
        for(let i = 0; i < options.length; i ++) {
            if(options[i].innerText == text) {
                //3. 移除 option
                document.getElementById("sel").removeChild(options[i]);
            }
        }
    });

    document.getElementById("btn").addEventListener("click", function() {
        //1. 获取文本框的内容
        let text = document.getElementById("text").value;
        //2. 创建一个option标签 <option></option>，设置文本内容为 文本框内容
        let option = document.createElement("option");
        //设置文本
        option.innerText = text;
        //3. 添加到 select 下拉框中
        document.getElementById("sel").appendChild(option);
        //清空文本框数据
        document.getElementById("text").value = "";
    })
</script>
</html>